<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 19:57:18
-->
<template>
  <div class="layer-control-container">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedLayers" @change="handleCheckedLayerChange">
      <el-checkbox v-for="layer in layerOptions" :label="layer.name" :key="layer.name">{{ layer.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import mixins from '../mixins';
export default {
  name: 'LayerControlTool',
  props: {
    getTool: {
      type: Function,
      required: true
    },
    mapLoadSuccess: Boolean
  },
  mixins: [mixins],
  data() {
    return {
      checkAll: true,
      isIndeterminate: true,
      checkedLayers: [],
      layerOptions: [
        { name: '控规用地', value: '0', prefix: ['BlockTool'], checked: true },
        { name: '供电单元', value: '1', prefix: ['RegionTool_5'], checked: true },
        { name: '供电网格', value: '2', prefix: ['RegionTool_4'], checked: true },
        { name: '供电区域', value: '3', prefix: ['RegionTool_3'], checked: true },
        { name: '现状网架', value: '4', prefix: ['ActualGrid'], checked: false },
        { name: '供电范围', value: '5', prefix: ['PowerRangeTool'], checked: false }
      ]
    };
  },
  watch: {
    mapLoadSuccess(success) {
      if (success) {
        this.getTool('ActualGridTool').setSearchOption(this.option);
        this.getTool('ActualGridTool').show();
        this.getTool('RegionTool').render(this.features);
        this.getTool('BlockTool').render(this.features);
        this.init();
      }
    }
  },
  methods: {
    init() {
      let options = {};
      let selected = [];
      this.layerOptions.forEach((item) => {
        options[item.value] = item.prefix;
        if (item.checked) {
          selected.push(item.value);
          this.checkedLayers.push(item.name);
        }
      });
      this.getTool('LayerControlTool').setLayerOption(options, selected);
    },
    handleCheckAllChange(val) {
      this.checkedLayers = val ? this.layerOptions.map((item) => item.name) : [];
      this.isIndeterminate = false;
      this.getCheckedValues();
    },
    handleCheckedLayerChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.layerOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.layerOptions.length;
      this.getCheckedValues();
    },
    getCheckedValues() {
      let checkedItems = this.layerOptions.filter((item) => {
        return this.checkedLayers.indexOf(item.name) > -1;
      });
      let checkedValues = checkedItems.map((item) => {
        return item.value;
      });
      this.getTool('LayerControlTool').show(checkedValues);
    }
  }
};
</script>

<style scoped></style>
